<!-- @format -->

<template>
  <view class="viewport">
    <image src="../../static/mine/myTopBgc.png" mode="scaleToFill" />
    <view class="profile">
      <image src="../../static/mine/profile.png" mode="scaleToFill" />
    </view>
    <u-toast ref="uToast" />
    <view class="logo"> </view>
    <view class="login">
      <button
        class="button phone"
        open-type="getPhoneNumber"
        @getphonenumber="wxLogin">
        <text class="icon icon-phone"> </text>
        手机号快捷登录
      </button>

      <view class="extra">
        <view class="caption">
          <navigator url="/pages/login/loginUser">
            <text>使用其它登录方式</text>
          </navigator>
        </view>
      </view>
      <view class="tips">
        <checkbox-group @change="checked">
          <label>
            <checkbox value="cb" :checked="checkIf" />
            勾选即代表您已同意
            <text> 《隐私政策》 </text>
          </label>
        </checkbox-group>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      params: {
        code: '',
        mobileCode: '', // 手机号
      },
      checkIf: false,
      length: 0,
    }
  },
  onLoad() {},
  onShow() {},
  mounted() {},
  methods: {
    checked(e) {
      this.checkIf = !this.checkIf
      console.log(e.detail.value.length)
      this.length = e.detail.value.length
    },
    wxLogin(ev) {
      let _this = this
      _this.params.mobileCode = ev.detail.code
      if (_this.checkIf === false) {
        uni.showToast({
          title: '请确认是否同意隐私条例',
          icon: 'none',
        })
        return
      }
      console.log(_this.params)
      uni.login({
        provider: 'weixin',
        success: (login_res) => {
          //获取授权登录code
          _this.params.code = login_res.code
          uni.request({
            url: _this.$httpApi.install.loginUser,
            method: 'POST',
            data: _this.params,
            success(res) {
              console.log(res)
              //判断数据返回后是否有结果
              if (res.data.code == 200) {
                uni.setStorageSync('sessionKey', res.data.sessionKey)
                uni.setStorageSync('phonenumber', res.data.data.phonenumber)
                uni.setStorageSync('nickName', res.data.data.nickName)
                uni.setStorageSync('userId', res.data.data.userId)
                uni.setStorageSync('userName', res.data.data.userName)
				
				uni.setStorageSync('avatar', res.data.data.avatar) //2023-12-16
                uni.setStorageSync('openid', '1')
				uni.setStorageSync('optionId', '')
				uni.setStorageSync('checked', '2')
                uni.showToast({ title: '登录成功', icon: 'none' })
                // 后退回到上一页
                setTimeout(() => {
                  // 后退回到上一页
                  uni.navigateBack({})
                }, 500)
                let phonenumber = res.data.data.phonenumber
                if (res.data.data.isFirstLogin == 0) {
                  wx.request({
                    url: _this.$httpApi.install.addUser,
                    method: 'POST',
                    data: {
                      phonenumber,
                    },
                    success(res) {
                      console.log('新增用户', res)
                      uni.setStorageSync('userId', res.data.user.userId)
					  uni.setStorageSync('nickName', res.data.data.nickName)	 
                    },
                  })
                }
              } else {
                uni.showToast({ title: '登录失败!', icon: 'none' })
              }
            },
            fail(error) {
              uni.showToast({
                icon: 'error',
                title: '登录失败',
                duration: 1000,
              })
            },
          })
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  // padding: 20rpx 40rpx;
  image {
    width: 750rpx;
  }
}

.profile {
  position: absolute;
  top: -90rpx;
  left: 270rpx;
  width: 196rpx;
  height: 196rpx;
  background: #fff;
  border-radius: 50%;
  margin-top: 300rpx;

  box-shadow: 0rpx 0rpx 15rpx 1rpx rgba(3, 69, 145, 0.14);
  opacity: 1;
  image {
    width: 196rpx;
    height: 196rpx;
  }
}

.logo {
  flex: 1;
  text-align: center;
}

.logo image {
  width: 220rpx;
  height: 220rpx;
  margin-top: 100rpx;
}

.login {
  display: flex;
  flex-direction: column;
  height: 600rpx;
  padding: 40rpx 20rpx 20rpx;
}

.login .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80rpx;
  font-size: 28rpx;
  border-radius: 72rpx;
  color: #fff;
}

.login .button .icon {
  font-size: 40rpx;
  margin-right: 6rpx;
}

.login .phone {
  width: 573rpx;
  height: 88rpx;
  background: #303030;
}

.login .wechat {
  background-color: #06c05f;
}

.login .extra {
  flex: 1;
  padding: 50rpx 30rpx 0;
}

.login .extra .caption {
  width: 515rpx;
  line-height: 1;
  font-size: 26rpx;
  color: #999;
  position: relative;
}

.login .caption text {
  transform: translate(-40%);
  background-color: #fff;
  position: absolute;
  top: -12rpx;
  left: 59%;
  color: #5d87ed;
}

.login .extra .options {
  display: flex;
  justify-content: center;
  margin-top: 70rpx;
}

.login .options button {
  line-height: 1;
  padding: 0;
  margin: 0 40rpx;
  background-color: transparent;
}

.login .extra .icon {
  text-align: center;
  font-size: 28rpx;
  color: #444;
}

.login .extra .icon::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 6rpx;
  font-size: 40rpx;
  border: 1rpx solid #444;
  border-radius: 50%;
}

.login .extra .icon-weixin::before {
  border-color: #06c05f;
  color: #06c05f;
}

.login .tips {
  position: absolute;
  bottom: 560rpx;
  left: 20rpx;
  right: 20rpx;
  font-size: 22rpx;
  color: #999;
  text-align: center;
}
.tips text {
  color: #5d87ed;
}
</style>
